<template>
  <div class="nav-view">
    <div class="nav-top">
      <div class="logo">Education Platform</div>
    </div>
    <el-menu 
      mode="horizontal" 
      router 
      class="nav-menu"
      background-color="#ffffff"
      text-color="#333333"
      active-text-color="#409EFF">
      <el-menu-item index="/home" class="menu-item">首页</el-menu-item>
      <el-menu-item index="store" class="menu-item">平台介绍</el-menu-item>
      <el-menu-item index="login" class="menu-item login-btn">登录</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
name: 'NavLayout'
}
</script>

<style scoped>
.nav-view {
height: 100vh;
width: 100vw;
background-color: #f5f7fa;
}

.nav-top {
width: 100%;
height: 60px;
background: linear-gradient(135deg, #409EFF 0%, #36D1DC 100%);
display: flex;
align-items: center;
padding: 0 20px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.logo {
color: white;
font-size: 24px;
font-weight: bold;
}

.nav-menu {
  padding: 0 20px;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.menu-item {
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  margin: 0 20px;
}

.login-btn {
  /* background-color: #acd1f7; */
  /* color: white !important; */
  border-radius: 4px;
  margin: 10px 0 !important;
  height: 40px !important;
  line-height: 40px !important;
}
</style>